<template>
<div id="tabBarItem" @click="itemClick">
    <slot v-if="!isActive" name="item-icon"></slot>
    <slot v-else name="item-icon-active"></slot>
    <div :style=" activeStyle ">
        <slot name="item-text"></slot>
    </div>
</div>
</template>

<script>
export default {
    name: "",
    props: {
        path: String,
        activeColor: {
            type: String,
            default: 'red'
        },
    },
    data() {
        return {
            // isActive:false
        };
    },
    methods: {
        itemClick() {
            this.$router.replace(this.path);
        },
    },
    computed: {
        isActive() {
            return this.$route.path.indexOf(this.path) !== -1;
            // 或者用这个也行
            //  return this.$route.path === this.path; 
        },
        activeStyle() {
            return this.isActive ? {
                color: this.activeColor
            } : {};
        }
    },
    components: {},
};
</script>

<style scoped>
#tabBarItem {
    /* border-right: 1px solid #ccc; */
    width: 25%;
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    font-size: 14px;
}

/* .active{
    color:red;
} */
</style>
